<template>
	<view class="e-p-20" :style="[AppSkinVar]">
		<view class="card-item bg-white e-p-l-30 e-p-r-30 e-p-t-30 e-m-b-20" v-for="item in cardList" :key="item.id" @tap="handleClick(item.id)">
			<view class="e-flex e-font-32 c-333 e-m-b-60">
				<view class="e-flex-1 e-p-r-50 e-line-1">
					{{item.headline}}
				</view>
				<view class="">
					{{$unitEn}}{{item.payMoney}}
				</view>
			</view>
			<view class="e-flex e-m-b-30">
				<view class="e-font-26 c-secondary e-flex-1">
					<text v-if="item.isEffective">{{$t('classify.永久有效')}}</text>
					<text v-else>{{item.effectiveTime}}</text>{{$t('classify.前有效')}}
				</view>
				<view class="e-font-30" :style="{color:AppSkin.primary}">
						<text class="e-m-r-6">{{item.exchangeSize}}{{$t('classify.次卡')}} /</text><text class="c-primary">{{ $t('classify.剩余') }} {{item.residueSize}} {{$t('classify.次')}}</text>
				</view>
			</view>
			<e-line color="#DFE3E6"></e-line>
			<view class="h-100">
				<view class="e-flex" v-if="currentId == item.id" :style="{color:AppSkin.primary}">
					<view class="cirlce-btn e-flex-xy-center" :style="{background:AppSkin.primary}">
						<image class="img-20-12" :src="$staticPath('white_select.png')" mode=""></image>
					</view>
					<text class="e-font-30 e-m-l-12">{{$t('classify.已选择')}}</text>
				</view>
				<view class="btn-box e-flex-xy-center" v-else @tap.stop="handleClick(item.id)">
					{{$t('user.立即使用')}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserTimeCardList
	} from '@/common/request/api'
	export default {
		data() {
			return {
				cardList:[],
				currentId:""
			}
		},
		onLoad(opt) {
			this.currentId = opt.id
			getUserTimeCardList({skuId:opt.skuId,status:0}).then(res => {
				if (res.code == 200 && res.data.length) {
					this.cardList = res.data
				}
			})
		},
		methods:{
			handleClick(id){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('updateCurrentCard', id)
				this.$back()
			}
		}
	}
</script>

<style scoped lang="scss">
	.card-item {
		box-shadow: inset 0px -1px 0px 0px #DFE3E6;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.h-100 {
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.btn-box {
		border-radius: 36px;
		border: 1px solid #B4B4B4;
		width: 172rpx;
		height: 70rpx;
		color: #353535;
		font-size: 30rpx;
	}
	.img-20-12 {
		width: 20rpx;
		height: 12rpx;
	}
	.cirlce-btn {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
	}
</style>